<template>
	<view class="record">
		<view class="select">
		  <picker mode="selector" :value="timeIndex" :range="timeList" @change="changeTime">
		  	<view class="picker">
		  		<view class="time">按时间筛选</view>
					<span class="iconfont icon">&#xe602;</span>
		  	</view>
		  </picker>
		</view>
		<view class="record-list">
			<empty v-if="empty" desc="暂无跟进记录" height="300"></empty>
			<view class="record-item" v-for="item in followList" :key="item.id">
				<view class="header">
					<view class="avatar">
						<image src="@/static/images/avatar.png" mode="aspectFill"></image>
					</view>
					<view class="mes">
						<view class="member">
							{{item.creatorName || ''}}
						</view>
						<view class="time">
							{{$share.getTime(item.createTime)}}
						</view>
					</view>
				</view>
				<view class="pro-content">
					{{item.content}}
				</view>
				<view class="file">
					<view class="file-item" v-for="(file, index) in item.fileUrls" :key="index"  @click="openFile(file)">
						{{index + 1}}.{{file.split('.').pop()}}
					</view>
					<view class="file-item" v-for="(pic, index) in item.picUrls" :key="index" @click="openImg(pic)">
						{{index + 1}}.{{pic.split('.').pop()}}
					</view>
				</view>
				<view class="next-time" v-if="item.nextTime != 0">
					计划下次跟进时间：{{$share.getTime(item.nextTime)}}
				</view>
			</view>
		</view>
		<view class="follow" @click="createFollow">
			写跟进
		</view>
	</view>
</template>

<script>
	import {getFollowListApi} from "@/api/follow_api.js";
	import empty from "@/components/empty.vue";
	export default{
		components:{
			empty
		},
		data(){
			return{
				empty: false,
				timeIndex:0,
				timeList:['全部', '近七日', '近一个月', '近三个月', '近半年', '近一年'],
				followList:[], //跟进记录
				onShow: false
			}
		},
		props:{
			projectId:0,
			name:'',
		},
		mounted() {
			if(!this.onShow){
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				this.getFollowList(this.projectId);
			}
		},
		methods:{
			// 转换时间格式
			getTime(time){
				let date = new Date(time);
				return date.toLocaleString('zh-CN', { hour12: false }).replace(/\//g,'-');
			},
			onShowMethod(id){
				this.onShow = true
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				this.getFollowList(id);
			},
			// 获取跟进记录
			async getFollowList(id){
				this.empty = false;
				let res = await getFollowListApi({
					bizType: 9,
					bizId: id,
					type: this.timeIndex
				}).catch(() => {
					uni.hideLoading();
					this.empty = true;
					return Promise.reject();
				})
				this.followList = [...res.data.list];
				if(res.data.total == 0){
					this.empty = true
				}
				await uni.hideLoading();
			},
			changeTime(e){
				this.timeIndex = e.detail.value;
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				this.getFollowList(this.projectId);
			},
			// 预览图片
			openImg(url){
				let urls = [];
				urls[0] = url
				uni.previewImage({
					urls: urls
				})
			},
			// 预览文件
			openFile(file){
				this.$share.openFile(file);
			},
			// 写跟进
			createFollow(){
				uni.navigateTo({
					url: `/pages/index/follow/create?id=${this.projectId}&name=${this.name}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import"@/common/style/customicons.scss";
	.record{
		padding: 28rpx;
		// position: relative;
		.select{
			@include flex-r-end-center;
			.picker{
				@include flex-r-start-center;
				.time{
					font-size: 24rpx;
					color: #101010;
					padding-right: 20rpx;
				}
				.icon{
					color: #101010;
					font-size: 24rpx;
				}
			}
		}
		.record-list{
			padding: 28rpx 0 0;
			.record-item{
				padding: 0 0 34rpx;
				.header{
					@include flex-r-start-center;
					.avatar{
						@include avatar(62);
					}
					.mes{
						font-size: 26rpx;
						padding-left: 24rpx;
						.member{
							color: #000;
							padding: 0 0 6rpx;
						}
						.time{
							color: #9A9A9A;
						}
					}
				}
				.pro-content{
					padding: 26rpx 0 18rpx;
					font-size: 26rpx;
					color: #000;
				}
				.file{
					.file-item{
						font-size: 26rpx;
						color: #000;
						background-color: #F3F6F9;
						height: 52rpx;
						text-align: center;
						line-height: 52rpx;
						border-radius: 6rpx;
						margin-bottom: 18rpx;
					}
				}
				.next-time{
					color: #9A9A9A;
					font-size: 26rpx;
				}
			}
		}
		.follow{
			position: fixed;
			right: 54rpx;
			bottom: 200rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
			line-height: 80rpx;
			text-align: center;
			background-color: #4095E5;
			color: #fff;
			font-size: 24rpx;
		}
	}
</style>